<template>

  <div class="table-page-search-wrapper">
    <a-card :bordered="false" class="card-area">
      <a-form layout="vertical">
        <a-row :gutter="48">
          <template v-if="advanced">
            <a-col :md="6" :sm="12">
              <a-form-item label="招生年度">
                <a-input v-model="queryParam.zsnd" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="推免类型">
                <a-input v-model="queryParam.tmlx" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="报考院系">
                <a-input v-model="queryParam.zsyx" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="报考专业">
                <a-input v-model="queryParam.zszy" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="报考导师">
                <a-input v-model="queryParam.zsds" />
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="10" :sm="20">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button type="primary" @click="exportExcel()">下载推免专业目录库导入模板</a-button>
              <a-upload @change='handleImport' :fileList="fileList" :beforeUpload="beforeUpload" :showUploadList='false'>
                <a-button type="primary" :loading="uploading">{{uploading ? 'Uploading' : '导入' }}</a-button>
              </a-upload>
              <a-button style="margin-left: 8px"
                        @click="() => queryParam = {ssyxm: selectMenu.yx.length === 1 ? queryParam.ssyxm : ''}">重置</a-button>
              <a @click="advanced = !advanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <div class="table-page-search-result">
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowSelection="options.rowSelection"
        :pagination="{ pageSize: 10 }"
        :scroll="{ x: 1600 }"
      >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      </s-table>
    </div>
  </div>
</template>

<script>
  // import moment from 'moment'
  import {STable} from '~'
  import {mapState} from 'vuex'

  const selectArr = ['TYPE0075']
  export default {
    name: 'TableList',
    components: {
      STable
    },
    data() {
      return {
        // 高级搜索 展开/关闭
        advanced: true,
        // 查询参数
        queryParam: {
          xslxm: '',
          zsnd: ''

        },
        postParams: {
        },
        // 表头
        columns: [
          {
            title: '招生年度',
            dataIndex: 'zsnd',
            width: 120,
            fixed: 'left'
          },
          {
            title: '推免类型',
            dataIndex: 'tmlx'
          },
          {
            title: '报考院系',
            dataIndex: 'zsyx'
          },
          {
            title: '报考专业',
            dataIndex: 'zszy'
          },
          {
            title: '报考导师',
            dataIndex: 'zsds'
          },
          {
            title: '备注',
            dataIndex: 'bz'
          },

        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          parameter.pageNum = parameter.pageNo
          let params = Object.assign(this.queryParam, parameter)
          return this.$api.student.tmybmzymlList(params).then(res => {
            return {
              data: res.data.rows,
              pageNo: parameter.pageNo,
              pageSize: parameter.pageSize,
              totalPage: Math.ceil(res.data.total / parameter.pageSize),
              totalCount: res.data.total
            }
          })
        },
        selectedRowKeys: [],
        selectedRows: [],

        // custom table alert & rowSelection
        options: {
          alert: {show: false}
        },
        optionAlertShow: true, // 是否显示alert，已选中
        visible: false,
        confirmLoading: false,
        editId: null,
        selectMenu: {
          yx: [], // 院系
          zy: [] // 所属专业
        },
        uploading: false,
        fileList: [],
      }
    },
    computed: {
      ...mapState({
        systemInfo: state => state.app.systemInfo,
      })
    },
    created() {
      selectArr.forEach(v => {
        this.$store.dispatch('app/setDictionary', v)
      })
      let params = {}
      this.$api.student.ntsGetYear(params).then(res => {
        // this.form.setFieldsValue({zsnd: res.data})
        this.queryParam.zsnd = res.data //默认选中年度
      })
      this.initSelectMenu()
    },
    methods: {
      initSelectMenu() {
        this.$nextTick(() => {
          this.$refs.table.refresh(true)
          this.queryParam.xslxm = '01'
        })
      },
      filterOption(value, op) {
        return op.componentOptions.children[0].text.indexOf(value) !== -1
      },
      yxChange(code) {
        this.$set(this.queryParam, 'sszym', '')
        if (code) {
          this.$api.base.majorAll({lsdwh: code}).then(res => {
            this.$set(this.selectMenu, 'zy', res.data)
          })
        } else {
          this.$set(this.selectMenu, 'zy', [])
        }
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      exportExcel(){
        this.$export('schoolRoll/tmybmzyml/download')
      },
      handleImport(data) {
        const formData = new FormData()
        formData.append('file', data.file)
        this.uploading = true
        this.$upload('schoolRoll/tmybmzyml/impList', formData).then(res => {
          this.uploading = false
          this.$message.success(res.msg)
        }).finally(res => {
          this.uploading = false
        })
      },
    }
  }
</script>
